<template>
  <div class="subPanel" v-show="status.isShow">
    <el-card shadow="hover">
      <el-tabs tab-position="left" v-model="status.tabName">
        <el-tab-pane name="menu">
          <template #label> <SvgIcon icon-class="outdent"></SvgIcon> </template>
        </el-tab-pane>
        <el-tab-pane name="image">
          <template #label> <SvgIcon icon-class="image"></SvgIcon> </template>
          <el-divider>
            <span>{{ $t('vichdraw.backgroundImage') }} </span>
          </el-divider>
          <el-form label-position="right" label-width="100px" size="mini">
            <el-form-item :label="$t('vichdraw.backgroundImage')">
              <el-upload
                id="upload"
                ref="upload"
                :auto-upload="false"
                action=""
                :show-file-list="false"
                :multiple="false"
                :on-change="methods.setBackground"
                accept=".png, .jpg, .jpeg"
              >
                <el-tooltip
                  effect="dark"
                  :content="$t(`vichdraw.fileTypeAndSize`)"
                  placement="right"
                >
                  <el-button size="mini">
                    <SvgIcon icon-class="upload" size="16"></SvgIcon>
                  </el-button>
                </el-tooltip>
              </el-upload>
            </el-form-item>
            <el-form-item :label="$t('vichdraw.rotate')">
              <el-tooltip effect="dark" :content="$t(`vichdraw.rotate`)" placement="right">
                <el-button @click="$emit('backgroundRotate')" size="mini">
                  <SvgIcon icon-class="rotateRight" size="16"></SvgIcon>
                </el-button>
              </el-tooltip>
            </el-form-item>
            <el-form-item :label="$t('vichdraw.plottingScale')">
              <el-input
                v-model="status.ruleLength"
                size="mini"
                placeholder="0"
                style="width: 80px"
              />
              <span style="margin: 8px">{{ $t('vichdraw.millimeter') }}</span>
            </el-form-item>
            <el-form-item>
              <el-button
                size="mini"
                type="primary"
                @click="$emit('finishBackground', status.ruleLength)"
                >{{ $t('vichdraw.startDraw') }}</el-button
              >
            </el-form-item>
            <div class="tod">
              <p>1.请先上传背景图片</p>
              <p>2.调整图片位置</p>
              <p>3.画出比例尺参照线</p>
              <p>4.输入比例尺表示的长度</p>
              <p>5.点击“开始设计”</p>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane name="fence">
          <template #label>
            <SvgIcon icon-class="fence"></SvgIcon>
          </template>
          <el-divider>
            <span>{{ $t('vichdraw.fence') }} ({{ $t('vichdraw.millimeter') }})</span>
          </el-divider>
          <el-form label-position="right" label-width="80px" size="mini" :model="fenceForm">
            <el-form-item :label="$t('vichdraw.color')">
              <el-select
                v-model="fenceForm.fenceColor"
                size="mini"
                @change="methods.updateFenceColor"
              >
                <el-option
                  v-for="item in options.colorOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('vichdraw.height')">
              <el-select
                v-model="fenceForm.fenceHeight"
                size="mini"
                @change="methods.updateFenceHeight"
              >
                <el-option
                  v-for="item in options.fenceHeight"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('vichdraw.spacing')">
              <el-select v-model="fenceForm.spacing" size="mini">
                <el-option
                  v-for="item in options.spacing"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('vichdraw.silk')">
              <el-select v-model="fenceForm.silk" size="mini">
                <el-option
                  v-for="item in options.silk"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item> </el-form
        ></el-tab-pane>
        <el-tab-pane name="door">
          <template #label>
            <SvgIcon icon-class="door"></SvgIcon>
          </template>
          <el-divider>
            <span>{{ $t('vichdraw.door') }} ({{ $t('vichdraw.millimeter') }})</span>
          </el-divider>
          <el-form label-position="right" label-width="80px" size="mini" :model="doorForm">
            <el-form-item :label="$t('vichdraw.color')">
              <el-select
                v-model="doorForm.fenceColor"
                size="mini"
                @change="methods.updateDoorColor"
              >
                <el-option
                  v-for="item in options.colorOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option
              ></el-select>
            </el-form-item>
            <el-form-item :label="$t('vichdraw.type')">
              <el-select v-model="doorForm.doorType" size="mini" @change="methods.updateDoorType">
                <el-option
                  v-for="item in options.doorType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option
              ></el-select>
            </el-form-item>
            <el-form-item :label="$t('vichdraw.direction')">
              <el-select
                v-model="doorForm.direction"
                size="mini"
                @change="methods.updateDoorDirection"
              >
                <el-option
                  v-for="item in options.direction"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option
              ></el-select>
            </el-form-item>
            <el-form-item :label="$t('vichdraw.lock')">
              <el-select
                v-model="doorForm.lockType"
                size="mini"
                @change="methods.updateDoorLockType"
              >
                <el-option
                  v-for="item in options.lockType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option
              ></el-select>
            </el-form-item>
            <el-form-item :label="$t('vichdraw.spacing')">
              <el-select v-model="doorForm.spacing" size="mini">
                <el-option
                  v-for="item in options.spacing"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('vichdraw.silk')">
              <el-select v-model="doorForm.silk" size="mini">
                <el-option
                  v-for="item in options.silk"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane name="pillar">
          <template #label>
            <SvgIcon icon-class="pillar"></SvgIcon>
          </template>
          <el-divider>
            <span>{{ $t('vichdraw.pillar') }} ({{ $t('vichdraw.millimeter') }})</span>
          </el-divider>
          <el-form label-position="right" label-width="80px" size="mini" :model="pillarForm">
            <el-form-item :label="$t('vichdraw.section')">
              <el-select
                v-model="pillarForm.section"
                size="mini"
                @change="methods.updatePillarSection"
              >
                <el-option
                  v-for="item in options.section"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option
              ></el-select>
            </el-form-item>
            <el-form-item :label="$t('vichdraw.color')">
              <el-select
                v-model="pillarForm.pillarColor"
                size="mini"
                @change="methods.updatePillarColor"
              >
                <el-option
                  v-for="item in options.colorOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option
              ></el-select>
            </el-form-item>
            <el-form-item :label="$t('vichdraw.hole')" v-show="false">
              <el-checkbox
                size="mini"
                :label="$t('vichdraw.yes')"
                v-model="pillarForm.hole"
              ></el-checkbox> </el-form-item></el-form
        ></el-tab-pane>
        <!-- <el-tab-pane name="pen">
          <template #label>
            <SvgIcon icon-class="pen"></SvgIcon>
          </template>
          <el-divider>
            <span>{{ $t('vichdraw.2dView') }}</span>
          </el-divider>
          <el-form ref="globalRef" :model="globalForm" label-width="80px" size="mini">
            <el-form-item :label="$t(`vichdraw.penType`)" prop="penType">
              <el-radio-group
                v-model="globalForm.penType"
                size="mini"
                @change="methods.updatePenType"
              >
                <div>
                  <el-radio label="normal" size="mini" border>{{
                    $t(`vichdraw.fragmentDrawing`)
                  }}</el-radio>
                </div>
                <div>
                  <el-radio label="sample" size="mini" border>{{
                    $t(`vichdraw.lineDrawing`)
                  }}</el-radio>
                </div>
              </el-radio-group>
            </el-form-item>

            <el-form-item
              :label="$t(`vichdraw.lineType`)"
              prop="lineType"
              @change="methods.updateLineType"
            >
              <el-radio-group v-model="globalForm.lineType" size="mini">
                <div>
                  <el-radio label="minSize" border>{{ $t(`vichdraw.minSizeApproach`) }}</el-radio>
                </div>
                <div>
                  <el-radio label="maxSize" border>{{ $t(`vichdraw.maxSizeApproach`) }}</el-radio>
                </div>
              </el-radio-group>
            </el-form-item>
          </el-form></el-tab-pane
        > -->
      </el-tabs>

      <!-- <div class="bottom">
        <el-button size="mini" type="primary" @click="status.isShow = false">{{
          $t('vichdraw.conform')
        }}</el-button>
      </div> -->
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'
import { useStore } from '@/store/index'

export default defineComponent({
  emits: ['uploadImage', 'backgroundRotate', 'finishBackground'],

  setup(props, { emit }) {
    const store = useStore()
    const { t } = useI18n()

    const container = ref(null)
    const status = reactive({
      isShow: true,
      ruleLength: 0,
      tabName: 'image'
    })
    const options = reactive({
      colorOptions: [
        { key: 'BLK', label: t(`vichdraw.black`), value: 'BLK' },
        { key: 'YLW', label: t(`vichdraw.yellow`), value: 'YLW' },
        { key: 'RAL7035', label: t(`vichdraw.grey`), value: 'RAL7035' },
        { key: 'RAL5017', label: t(`vichdraw.blue`), value: 'RAL5017' },
        { key: 'RAL3000', label: t(`vichdraw.red`), value: 'RAL3000' },
        { key: 'RAL9016', label: t(`vichdraw.white`), value: 'RAL9016' }
      ],
      spacing: [{ key: '25*100', label: '25*100', value: '25*100' }],
      silk: [{ key: '3.0', label: '3.0', value: '3.0' }],
      doorType: [
        { key: 'JLM', label: t(`vichdraw.hingedDoor`), value: 'JLM' },
        { key: 'PYM', label: t(`vichdraw.slidingDoor`), value: 'PYM' }
      ],
      direction: [
        { key: 'LEFT', label: t(`vichdraw.left`), value: 'LEFT' },
        { key: 'RIGHT', label: t(`vichdraw.right`), value: 'RIGHT' }
      ],
      lockType: [
        { key: 'A', label: t(`vichdraw.aLatchLock`), value: 'A' },
        { key: 'B', label: t(`vichdraw.bLatchLock`), value: 'B' }
      ],
      section: [
        { key: '40*60', label: '40*60', value: '40*60' },
        { key: '60*60', label: '60*60', value: '60*60' }
      ],
      fenceHeight: [
        { key: 1350, label: 1350, value: 1350 },
        { key: 1850, label: 1850, value: 1850 },
        { key: 2050, label: 2050, value: 2050 }
      ],
      pillarHeight: [
        { key: 1500, label: 1500, value: 1500 },
        { key: 2000, label: 2000, value: 2000 },
        { key: 2200, label: 2200, value: 2200 }
      ]
    })
    const globalForm = reactive({
      name: '',
      penType: store.globalParam.penType,
      lineType: store.globalParam.lineType
    })
    const fenceForm = reactive({
      fenceColor: t(`vichdraw.black`),
      fenceHeight: store.fence.height,
      spacing: `${store.fence.spacing[0]}*${store.fence.spacing[1]}`,
      silk: store.fence.silk
    })
    const doorForm = reactive({
      fenceColor: t(`vichdraw.black`),
      doorType: t(`vichdraw.hingedDoor`),
      direction: t(`vichdraw.left`),
      lockType: t(`vichdraw.bLatchLock`),
      spacing: '25*100',
      silk: '3.0'
    })
    const pillarForm = reactive({
      pillarHeight: 2000,
      pillarColor: t(`vichdraw.yellow`),
      section: '40*60',
      hole: true
    })
    const methods = {
      setBackground: (file: { raw: Blob }) => {
        if (file === null) {
          return
        }
        if (file.raw.type.indexOf('image/') === -1) {
          ElMessage('Please select an image file')
          return
        }
        if (file.raw.size > 10 * 1000 * 1000) {
          ElMessage('This file is too big, Please select a new one')
          return
        }
        if (typeof FileReader === 'function') {
          const reader = new FileReader()
          reader.onload = (event) => {
            emit('uploadImage', (event.target as any).result)

            // panel?.setBackground((event.target as any).result)
          }
          reader.readAsDataURL(file.raw)
        } else {
          ElMessage('Sorry, FileReader API not supported')
        }
      },
      updatePenType: () => {
        if (store.globalParam.penType !== globalForm.penType) {
          store.globalParamAction.updatePenType(globalForm.penType)
        }
      },
      updateLineType: () => {
        if (store.globalParam.lineType !== globalForm.lineType) {
          store.globalParamAction.updateLineType(globalForm.lineType)
        }
      },
      updateFenceColor: (val: string = 'BLK') => {
        if (store.fence.color !== val) {
          store.fenceAction.updateColor(val)
        }
      },
      updateFenceHeight: (val: number = 2000) => {
        if (store.fence.height !== val) {
          store.fenceAction.updateHeigh(val)
          store.doorAction.updateHeigh(val)
          store.pillarAction.updateHeight(val + 150)
        }
      },
      updateDoorColor: (val: string = 'BLK') => {
        if (store.door.color !== val) {
          store.doorAction.updateColor(val)
        }
      },
      updateDoorType: (val: string = 'JLM') => {
        if (store.door.type !== val) {
          store.doorAction.updateType(val)
        }
      },
      updateDoorDirection: (val: string = 'LEFT') => {
        if (store.door.direction !== val) {
          store.doorAction.updateDirection(val)
        }
      },
      updateDoorLockType: (val: string = 'B') => {
        if (store.door.lock !== val) {
          store.doorAction.updateLock(val)
        }
      },
      updatePillarColor: (val: string = 'YLW') => {
        if (store.pillar.color !== val) {
          store.pillarAction.updateColor(val)
        }
      },
      updatePillarSection: (val: string = '60*60') => {
        const diameter = val.split('*')
        if (diameter.length !== 2) return
        // if (store.pillar.diameter !== [parseInt(diameter[0]), parseInt(diameter[1])]) {
        store.pillarAction.updateDiameter([parseInt(diameter[0]), parseInt(diameter[1])])
        // }
        console.log(store.pillar.diameter)
      }
    }
    onMounted(async () => {
      // await methods.createContainer()
    })
    return {
      container,
      status,
      options,
      fenceForm,
      doorForm,
      pillarForm,
      globalForm,
      methods
    }
  }
})
</script>

<style scoped>
.card-header {
  height: 16px;
  display: flex;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: end;
}

.tod {
  font-size: 6px;
  color: #409eff;
}
</style>
